<template>
  <div class="admin_index">
    <div class="header">
      <img :src="info.avatar" class="thumb">
      <div class="name_view">
        <div class="name">{{info.nickname}}</div>
        <div class="type">{{info.type == 1 ? "系统管理员":"运营商"}}</div>
      </div>
      <div class="feedback" style="margin-right:.4rem" @click="jumpto('/feedbackList')">
        <div class="icon_view">
          <img :src="feedback_icon1" alt class="feedback_icon">
          <span class="dot"></span>
        </div>
        <div class="feedback_type">故障反馈</div>
      </div>
      <div class="feedback" @click="jumpto('/feedbackList')">
        <div class="icon_view">
          <img :src="feedback_icon2" alt class="feedback_icon">
          <span class="dot"></span>
        </div>
        <div class="feedback_type">报错反馈</div>
      </div>
    </div>
    <div class="main">
      <div class="info">
        <img :src="info_bg" alt class="info_bg">
        <div class="list_title">充电桩列表</div>
        <div class="look_list" @click="jumpto('/stationList')">
          <span>查看所有充电桩</span>
          <img :src="right_icon" alt class="right_icon">
        </div>
        <div class="info_bottom">
          <div class="item">
            <span class="title">维护中设备</span>
            <span style="color:#F8B500">{{info.off_num}}</span>
          </div>
          <div class="item">
            <span class="title">正常运行</span>
            <span style="color:#636D8F">{{info.on_num}}</span>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="item" @click="jumpto('/record')">
          <img :src="item_icon1" alt class="item_bg">
          <div class="list_title">充电记录</div>
          <div class="look_list">
            <span>查看记录</span>
            <img :src="right_icon" alt class="right_icon">
          </div>
        </div>
        <div class="item" @click="jumpto('/count')">
          <img :src="item_icon2" alt class="item_bg">
          <div class="list_title">报表统计</div>
          <div class="look_list">
            <span>查看记录</span>
            <img :src="right_icon" alt class="right_icon">
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="logout">注销登录</div> -->
  </div>
</template>
   
<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions } from "vuex";
import wx from "weixin-js-sdk";
export default {
  name: "login",
  data() {
    return {
      right_icon: require("../../../assets/images/right_icon.png"),
      info_bg: require("../../../assets/images/info_bg.png"),
      feedback_icon1: require("../../../assets/images/feedback_icon1.png"),
      feedback_icon2: require("../../../assets/images/feedback_icon2.png"),
      item_icon1: require("../../../assets/images/item_icon1.png"),
      item_icon2: require("../../../assets/images/item_icon2.png"),
      //后台
      info: {}
    };
  },
  created() {},
  mounted() {
    this.getUserInfo();
    this.WXconfig();
  },
  methods: {
    ...mapActions("Station", ["setInloc"]),
    jumpto(path) {
      this.$router.push({ path: path });
    },
    getUserInfo() {
      const that = this;
      this.$dialog.loading.open("正在加载");
      this.$http.get("/admin/Info", {}).then(res => {
        if (res.data.errno == 0) {
          this.$dialog.loading.close();
          this.info = res.data.data;
        } else {
          this.$dialog.loading.close();
          if (res.data.errno == 10001) {
            //没有登录
            that.$dialog.toast({
              mes: res.data.message,
              timeout: 3000,
              callback: () => {
                that.$router.replace("/login");
              }
            });
          } else {
            that.$dialog.toast({
              mes: res.data.message,
              timeout: 9000000,
              callback: () => {
                that.$router.replace("/login");
              }
            });
          }
        }
      });
    },
    WXconfig() {
      const that = this;
      this.$http
        .get("/wechat_jssdk", {
          params: {
            url: window.location.href
          }
        })
        .then(res => {
          const result = res.data.data;
          wx.config({
            debug: false,
            appId: result.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: result.timestamp, // 必填，生成签名的时间戳
            nonceStr: result.nonceStr, // 必填，生成签名的随机串
            signature: result.signature, // 必填，签名，见附录1
            //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
            jsApiList: [
              "checkJsApi",
              "startRecord",
              "stopRecord",
              "translateVoice",
              "scanQRCode",
              "openCard",
              "updateAppMessageShareData",
              "getLocation",
              "openLocation"
            ]
          });
        });
      wx.ready(() => {
        wx.getLocation({
          type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function(res) {
            console.log(res);
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            that.setInloc(res);
          }
        });
      });
    }
  },
  components: {}
};
</script>
